<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>网页导航栏示例</title>
    <style>
        ul > li {
            list-style-type: none;
            display: block;
            width: 180px;
            float: left;
            /*padding-left: 120px;*/
            text-align: center;
            background-color: silver;
        }

        li:hover {
            background-color: blue;
        }

        .active {
            background-color: aquamarine;
        }
    </style>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in navi"><a v-on:click="itemClicked(index)"
                                             v-bind:class="{active: index === currentIndex}" v-bind:href="item[1]">{{
            item[0] }}</a></li>

    </ul>
</div>
<script type="module">
    import {createApp, reactive, ref} from "../../../../../js/vue.esm-browser.js";

    const app = createApp({
        setup() {
            let navi = reactive([
                ["首页", "https://www.baidu.com"],
                ["网页特效", "https://www.baidu.com"],
                ["精品脚本", "https://www.baidu.com"],
                ["JSP", "https://www.baidu.com"],
                ["Spring", "https://www.baidu.com"],
                ["PHP", "https://www.baidu.com"],
            ])

            let currentIndex = ref(null)

            function itemClicked(index) {
                this.currentIndex = index
            }

            return {
                navi,
                currentIndex,
                itemClicked
            }
        }
    })

    app.mount("#app")
</script>
</body>
</html>